import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { TabBar } from 'antd-mobile';
import { withRouter } from 'react-router-dom';

class NavLinkBar extends Component {
	static propTypes = {
		data: PropTypes.array.isRequired
	}
	render(){	
		const navList = this.props.data.filter(v=>!v.hide);
		const { pathname } = this.props.location;
		return (
			<TabBar>
				{navList.map(v => (
					<TabBar.Item
						badge={v.path === '/msg' ? this.props.unRead : 0}
						key={v.path}
						title={v.text}
						icon={{uri: require(`../../statics/tabBar/${v.icon}.png`)}}
						selectedIcon={{uri: require(`../../statics/tabBar/${v.icon}-active.png`)}}
						selected={pathname === v.path}
						onPress={()=>{
							this.props.history.push(v.path)
						}}
					>
					
					</TabBar.Item>
				))}
			</TabBar>
		)
	}
}

const mapStateToProps = (state) => ({
	unRead: state.getIn(['chat', 'unRead'])
})

export default connect(mapStateToProps, null)(withRouter(NavLinkBar));